<template>
    <scroll-view class="recommends_view" scroll-y @scrolltolower="handleToLower" v-if="recommends.length > 0">
        <!--  推荐 S -->
        <view class="recommend_wrap">
            <navigator class="recommend_item" v-for="item in recommends" :key="item.id" :url="`/pages/album/index?id=${item.target}`">
                <image mode="widthFix" :src="item.thumb"></image>
            </navigator>
        </view>
        <!--  推荐 E -->
        <!-- 月份 S -->
        <view class="monthes_wrap">
            <view class="monthes_title">
                <view class="monthes_title_info">
                    <view class="monthes_info">
                        <text>{{monthes.DD}} /</text>
                        {{monthes.MM}} 月
                    </view>
                    <view class="monthes_text">{{monthes.title}}</view>
                </view>
                <view class="monthes_title_more">更多 ></view>
            </view>
            <view class="monthes_content">
                <view class="monthes_item" v-for="(item , index) in monthes.items" :key="item.id">
                    <go-detail :list="monthes.items" :index="index">
                        <image mode="aspectFill" :src="item.thumb + item.rule.replace('$<Height>','360')"></image>
                    </go-detail>
                </view>
            </view>
        </view>
        <!-- 月份 E -->
        <!-- 热门 S -->
        <view class="hots_wrap">
            <view class="hots_title">
                <text>热门</text>
            </view>
            <view class="hots_content">
                <view class="hots_item" v-for="(item,index) in hots" :key="item.id">
                    <go-detail :list="hots" :index="index">
                    <image mode="widthFix" :src="item.thumb"></image>
                    </go-detail>
                </view>
            </view>
        </view>
        <!-- 热门 E -->
    </scroll-view>
</template>
<script>
import moment from 'moment'
import goDetail from '@/components/goDetail'
export default {
    data() {
        return {
            recommends: [],
            monthes: {},
            hots: [],
            params: {
                limit: 30,
                order: 'hot',
                skip: 0
            },
            // 是否还有下一页
            hasMore: true
        }
    },
   mounted(){
        uni.setNavigationBarTitle({
            title: '首页'
        });
       this.getList();
   },
   methods: {
    //    获取列表数据
    getList(){
        this.request({
           url: 'http://157.122.54.189:9088/image/v3/homepage/vertical',
           data: this.params
       })
       .then(result=>{

        //    console.log(result)
            if(this.recommends.length === 0){
                this.recommends = result.res.homepage[1].items;
                this.monthes = result.res.homepage[2];
                this.monthes.MM = moment(this.monthes.stime).format('MM');
                this.monthes.DD = moment(this.monthes.stime).format('DD');
            }

            if(result.res.vertical.length === 0){
                this.hasMore = false;
                 uni.showToast({
                        title: '没有更多数据了',
                        icon: 'none'
                    })
                return ;
            }
            
            // console.log(this.monthes);
            // this.hots = result.res.vertical;
            this.hots = [...this.hots,...result.res.vertical];
       })
    },
       // 滚动条触底事件
       handleToLower(){
           if(this.hasMore){
            //   1.修改参数 skip+= limit
        this.params.skip += this.params.limit;
        // 2.重新发送请求
        this.getList();
        // 3.请求回来成功 hots 数据的叠加
           }else{
               uni.showToast({
                   title:'没有数据了',
                   icon:'none'
               })
           }
        
       }
   },
   components: {
       goDetail
   }
}
</script>
<style lang="scss" scoped>
    .recommends_view {
        // height : 屏幕高度 - 头部高度
        height: calc(100vh - 36px);
    }
    .recommend_wrap {
        display: flex;
        flex-wrap: wrap;
        .recommend_item {
            width: 50%;
            border: 5rpx solid #fff;
        }
    }
    .monthes_wrap {
        
        .monthes_title {
            display: flex;
            justify-content: space-between;
            padding: 20rpx;
        .monthes_title_info {
            color: $color;
            font-size: 30rpx;
            font-weight: 600;
            display: flex;
            .monthes_info {
              text {
              font-size: 36rpx;
              
              }
            }
            .monthes_text {
                font-size: 34rpx;
                color: #8a8a8a;
                margin-left: 30rpx;    
            }
        }

        .monthes_title_more {
            font-size: 24rpx;
            color: $color;
        }
    }
    .monthes_content {
        display: flex;
        flex-wrap: wrap;
        .monthes_item {
            width: 33.33%;
            border: 5rpx solid #fff;
        }

  }
}
.hots_wrap {
  .hots_title {
      padding: 20rpx;
    text {
        padding-left: 20rpx;
        border-left: 10rpx solid $color;
        font-size: 34rpx;
        font-weight: 600;
    }
  }

  .hots_content {
      display: flex;
      flex-wrap: wrap;
    .hots_item {
        width: 33.33%;
        border: 5rpx solid #fff;
      image {

      }
    }
  }
}
</style>d